<!doctype html>
<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script>	
		$(document).ready(function(){

			$("figcaption").hide();				
			$("img")
				.click(function(){
				
					$(this).animate({height:"55%", width:"55%", opacity: 1},1000, function(){

						$(this).parent().children("figcaption").show("slow");
						/*$("figcaption").css("visibility","visible", 2000);*/
					});

					
			});




		});
	</script>
	<style>
		body {
			margin:0;
			height: 100%;
			background-color: #88FCFF;
			font-family: 'Fontdiner Swanky', cursive;
		}		

		figure {
			position:relative;
		}		
		figure img {
			display: inline;
			height: 15%;
			width:15%;						
			border-radius: 20px;			
			cursor:pointer;
			float:left;
		}

		figcaption {			
			font-size:2em;
			/*visibility: hidden;*/
		}
		.mainWrapper {
			margin: 2% 2%;
			/*border: 1px solid black;
			background-color:white;*/
		}
	</style>
</head>
<body>
	<div class="mainWrapper">
		<div class="photosWrapper">
			<figure>
				<img src="https://lh3.googleusercontent.com/95cgMJpo8gMYr0y11mfdrPoh_Bp1cBWWQqW3jtsFTsk=w425-h238-p-no" />
				<figcaption>Yes, thats Srinath for you!!! <br />A Jumpin' Jack</figcaption>
			</figure>		
		<div>
	</div>
</body>
</html>